<script>
import BaseUrl from "@/http/request/BaseUrl";
import TokenAxios from "@/http/request/TokenAxios";
import SimpleAxios from "@/http/request/SimpleAxios";

export default {
  data() {
    return {
      loginInfo: {

      },
      xxx:'',
      logState: false
    }
  },
  methods: {
    login(){
      this.$router.push('/login')
    },
    // 处理点击头像的下拉菜单项
    handleCommand(command) {
     if (command == 'openLogoutConfirm') {
        this.openLogoutConfirm();
      }
    },
    // 打开登出确认框
    loadCurrentLoginInfo() {
      let loginInfoString = localStorage.getItem('loginInfo');
      if (!loginInfoString) {
        this.$router.push('/login');
        return;
      }
      this.loginInfo = JSON.parse(loginInfoString);
    },
    openLogoutConfirm(){
      let message = '即将退出登录，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleLogout();
      }).catch(() => {
      });
    },
    // 处理登出
    handleLogout() {
      let url = BaseUrl.PASSPORT + '/passport/logout';
      console.log('url = ' + url);

      TokenAxios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '退出登录成功！',
            type: 'success'
          });
          localStorage.removeItem('loginInfo');
          this.$router.push('/login');
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
},
    open(){
      this.$alert('这是一段内容','标题名称',{
        confirmButtonText:'确定',
        callback: action => {
          this.$message({
            type:'info',
            message: 'action: ${action}'
          });
        }
      })
    },

  //     // 加载当前登录的用户信息
  //     loadCurrentLoginInfo() {
  //       let loginInfoString = localStorage.getItem('loginInfo');
  //       if (!loginInfoString) {
  //         this.$router.push('/login');
  //         return;
  //       }
  //       this.loginInfo = JSON.parse(loginInfoString);
  //   }
     },

  mounted() {
    var logInfo = localStorage.getItem('loginInfo');
    if (logInfo!=null){
      this.logState = true;
    }

    // console.log(loginInfoJsonString)
    // this.loginInfo = JSON.parse(loginInfoJsonString);
    this.loadCurrentLoginInfo();


    router.beforeEach((to,from,next)=>{
      // to要跳转到的路径
      // from从哪个路径来
      // next往下执行的回调
      // 在localStorage中获取token
      let token=localStorage.getItem('username')
      // 判断该页面是否需要登录
      if(to.meta.auth){
        // 如果token存在直接跳转
        if(token){
          next()
        }else{
          // 否则跳转到login登录页面
          next({
            path:'/login',
            // 跳转时传递参数到登录页面，以便登录后可以跳转到对应页面
            query:{
              redirect:to.fullPath
            }
          })
        }
      }else{
        // 如果不需要登录，则直接跳转到对应页面
        next()
      }
    })
  }
}
</script>

<template>
  <div>
    <el-container>
      <el-aside width="200px" class="layout-aside">

            <el-menu
                router
                :default-active="activeMenuItemPath"
                class="el-menu-vertical-demo"
                background-color="#00474f"
                text-color="#fff"
                active-text-color="#fff">
              <el-menu-item class="element_home_label"  index="index">
                <span style="font-size: 24px;font-family: 'Roboto', sans-serif;">OSS社区平台</span>
              </el-menu-item>
              <el-menu-item index="/admin/index">
                <i class="el-icon-s-home" ></i>
                <span class="span_aside">主页</span>
              </el-menu-item>
              <el-menu-item index="/admin/user">
                <i class="el-icon-user-solid" ></i>
                <span slot="title" class="span_aside">用户管理</span>
              </el-menu-item>
<!--              <el-submenu index="1" v-show="logState">-->
<!--                <template slot="title">-->
<!--                  <i class="el-icon-menu" ></i>-->
<!--                  <span slot="title" class="span_aside">日志管理</span>-->
<!--                </template>-->
<!--                <el-menu-item index="/admin/operation">-->
<!--                  <i class="el-icon-s-operation"></i>-->
<!--                  <span slot="title" class="span_aside">操作日志</span>-->
<!--                </el-menu-item>-->
<!--                <el-menu-item index="/admin/log">-->
<!--                  <i class="el-icon-s-operation"></i>-->
<!--                  <span slot="title" class="span_aside">登录日志</span>-->
<!--                </el-menu-item>-->
<!--              </el-submenu>-->

              <el-submenu index="2" v-show="logState">
              <template slot="title">
                <i class="el-icon-s-operation" ></i>
                <span slot="title" class="span_aside">視頻管理</span>
              </template>
                <el-menu-item index="/admin/video">
                  <i class="el-icon-s-operation" ></i>
                  <span slot="title" class="span_aside">視頻审核</span>
                </el-menu-item>
                <el-menu-item index="/admin/videos">
                  <i class="el-icon-s-operation" ></i>
                  <span slot="title" class="span_aside">視頻列表</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-warning-outline" ></i>
                  <span slot="title" class="span_aside">违规管理</span>
                </template>
<!--              <el-menu-item index="/admin/rule/type">-->
<!--                <i class="el-icon-files" ></i>-->
<!--                <span slot="title" class="span_aside">分类违规</span>-->
<!--              </el-menu-item>-->
                <el-submenu index="3-1">
                  <template slot="title">
                    <i class="el-icon-notebook-2" ></i>
                    <span slot="title" class="span_aside">視頻违规</span>
                  </template>
                  <el-menu-item index="/admin/audited/video/complaint">
                    <i class="el-icon-folder" ></i>
                    <span slot="title" class="span_aside_index">已处理</span>
                  </el-menu-item>
                  <el-menu-item index="/admin/unaudited/note/complaint">
                    <i class="el-icon-folder-opened" ></i>
                    <span slot="title" class="span_aside_index">未处理</span>
                  </el-menu-item>
                </el-submenu>

<!--                <el-submenu index="3-2">-->
<!--                  <template slot="title">-->
<!--                    <i class="el-icon-chat-line-square" ></i>-->
<!--                    <span slot="title" class="span_aside">评论违规</span>-->
<!--                  </template>-->
<!--                  <el-menu-item index="/admin/audited/comment/complaint">-->
<!--                    <i class="el-icon-folder" ></i>-->
<!--                    <span slot="title" class="span_aside_index">已审核</span>-->
<!--                  </el-menu-item>-->
<!--                  <el-menu-item index="/admin/unaudited/comment/complaint">-->
<!--                    <i class="el-icon-folder-opened" ></i>-->
<!--                    <span slot="title" class="span_aside_index">未审核</span>-->
<!--                  </el-menu-item>-->
<!--                </el-submenu>-->
<!--                <el-menu-item index="/admin/complaint/log">-->
<!--                  <i class="el-icon-paperclip" ></i>-->
<!--                  <span slot="title" class="span_aside">投诉列表</span>-->
<!--                </el-menu-item>-->
              </el-submenu>
              <el-menu-item index="/admin/type">
                <i class="el-icon-document-copy" ></i>
                <span slot="title" class="span_aside">分类管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/tag">
                <i class="el-icon-paperclip" ></i>
                <span slot="title" class="span_aside">标签管理</span>
              </el-menu-item>
<!--              <el-menu-item index="/admin/order">-->
<!--                <i class="el-icon-shopping-cart-2" ></i>-->
<!--                <span slot="title" class="span_aside">订单管理</span>-->
<!--              </el-menu-item>-->
            </el-menu>
      </el-aside>
      <el-container>
        <!--      头部分栏-->
<!--        #002329-->
        <el-header style="background-color:#002329">

          <!-- 顶栏右侧的当前用户信息及下拉菜单 -->
          <div class="login_user" v-show="logState">
            <span>
            <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tx&skin=orange&color=FFFFFF"
                    frameborder="0" width="100%" height="30" allowtransparency="true"  class="weather"></iframe>
              </span>
            <span class="welcome">欢迎回来，<b>{{loginInfo.nickname}}</b>！</span>
            <el-dropdown @command="handleCommand">
              <el-avatar shape="square" size="medium" :src="loginInfo.avatar"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-right" divided command="openLogoutConfirm">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div v-show="!logState">
          <span style="color: white;position: relative;left: 1400px;top: 10px">当前未登录请先登录！！！</span>
          <el-button style="position: relative;left: 1400px;top: 10px" @click="login()">登录</el-button>
          </div>
        </el-header>
        <el-main class="layout-main">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.layout-aside{

}
.span_aside{
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}
.span_aside_index{
  font-size: small;
  font-family: 'Lato', sans-serif;
}
/*aside菜单样式*/
.el-menu-vertical-demo{
  width: 200px;
  min-height: calc(100vh + 50px + 50px + 25px + 25px + 25px + 25px + 25px + 25px + 25px + 50px);
}
/*菜单跳转客户端*/
.element_home_label{
  height: 60px;
  width: 199px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='100%25' height='100%25' fill='%23002329'/%3E%3C/svg%3E");
  text-align: center;
  line-height: 58px;
  font-size: 20px;
  margin: 0 auto;
  color: #f9f0ff;
}

.login_user {
  float: right;
  margin-top: 12px;
  display: flex;
}

.welcome{

  line-height: 36px;
  color: #fff;
  margin-right: 10px;
}

.layout-main{
  background-color:#f5f5f5;
}

.weather{
  padding-top: 7px;
  position: relative;
  right: 1080px;
  width: 400px;
}
</style>